vue3
<!-- author: xuett -->
<!-- date: 2025-03-19 09:24:40 -->
<!-- description: 校验弹窗 -->
<template>
  <el-dialog v-model="dialogVisible" title="页面校验" width="700px" @close="close">
    <div class="check-box">
      <!-- 校验进度提示 -->
      <div class="check-process">
        <img class="check-img" src="" alt="" />
        <div class="check-tip">当前页面正在校验中，请稍等~</div>
        <div class="process-box">
          <el-progress :percentage="progress" :status="progress == 100 ? 'success' : ''" />
        </div>
      </div>
      <!--  校验结果 -->
    </div>
  </el-dialog>
</template>

<script setup>
const state = reactive({
  dialogVisible: false,
  progress: 100
});
const { dialogVisible, progress } = toRefs(state);

//打开弹窗
const show = () => {
  state.dialogVisible = true;
};

//关闭
const close = () => {
  state.dialogVisible = false;
};

defineExpose({ show });
</script>

<style scoped lang="scss">
.check-box {
  width: 100%;
  padding: 14px 8px 44px;
  .check-process {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .check-img {
      display: block;
      width: 204px;
      height: 169px;
    }
    .check-tip {
      font-family: Alibaba PuHuiTi-Regular;
      font-size: 16px;
      color: rgba($color: #000000, $alpha: 0.85);
      line-height: 22px;
      margin: 36px 0 20px 0;
    }
    .process-box {
      width: 385px;
    }
    .el-progress--line {
      max-width: 383px;
    }
  }
}
</style>
